[00:00] Welcome back everyone. So it's time to start talking about the mobile specific screens we're going to create in this project. Now, if we look at a session I'm going to focus on the top nav or the little navigation bar here because we do have a problem if we're trying to view this project on a smaller screen. So if I were to reduce the width of my browser here you can see that station three is actually cut off, I can't click on it. So what I'd like to do is I would like to have a mobile specific version of our little nav view at the top here. And the idea being that when the session's launched if there isn't a whole lot of width we'll show the mobile or the smaller version and then when there's a lot of width available we'll show the larger version. So we'll just kind of switch between the two. Now we can use a break point container for this then that's precisely what a breakpoint container does. So let's move the browser out of the way, in the project browser, under perspective, under views I'm going to add a new view to this navigation folder. I'm going to right click, I'll create a new view that we'll call this top nav-breakpoints.

[01:10] And I will change the container type to a break point container. Normally, I wouldn't create a page for this or opt in to the page URL there because this view we're creating is going to be docked somewhere. However, I do want to create a testing page just so we can play around with the breakpoint container a little bit and sort of show off how it works. So I'll change the page URL to slash test and then I'll click create view. All right, so the way this works, the breakpoint container has two children. Each child has a single component. In addition, the break point container also has this break point setting which is set to 640 pixels right now. So when there's less than 640 pixels available, we switch to the small child. When there's 640 pixels or whatever the break points set to or more we switched to the large child. And we basically show the component of whichever child we've switched to.

[02:04] Now let's demonstrate this. So I'm going to head over to the component panel here and under display, I'll grab an icon and drag that in. And with this icon components selected here we can see the under position properties. There's only one property, just size and it basically determines which child this component belongs to. So in this case, it is the large child. Now each child can only have a single component. However, that component can be a container or an embedded view. I want to switch to these small child. So the way you do that in the designer is you click on the small child up here and then you just click in the workspace here which switches you over to the small child. Now let's add a component for the small child. We'll go back to the component panel. we'll go to how about thermometer, we'll just drag that in. Okay, so I did say that the break point container does switch children based off of the available width but you won't see that in the designer. If I select the root container here and I just started resizing the container, it won't switch between the children.

[03:02] So we'll have to go to a session to test this out. What we'll do now is we'll actually go ahead and save our project. We will head back to the home of the perspective section here. So we'll come over to that leftmost tab at the bottom and then we'll launch this test page configuration we created. So I will select test, right click and then launch URL. And if I move that over, all right, so we see the icon, if I make my browser a little bit more narrower at some point we switched to the thermometer. So we'll just switch between those two different children when the browser has more or less available width or if we're on a phone or a smaller device it will just launch into the smaller child. So instead of showing an icon or a thermometer here I want to change this top nav here. So for any one of our pages here, I want to go ahead and go to a more condensed version of the navbar that maybe only has a instead of station one, two and three spelled out, how about just a single station details. And then when we're on the or when you have more available width, we'll show each one of these stations individually.

[04:07] So let's head back to the designer here. I'm going to go back to our top nav break points view here, I'm going to head up to the project browser. I'm going to right click on the icon components. I'm going to delete this and then I'm going to delete the thermometer as well. So the break point container will basically switch between a larger and a smaller version of our top nav views here. Now we have this first top nav, which is actually the, we're going to use this for the larger child. So what I'm going to do is for top nav first I'm just going to remain it. So I'm going to right click on top nav and I will rename it. Let's rename this to top nav-large. Then I'll hit Enter. Now because we renamed this view that did break our docked view configuration under the shared settings page configuration. So we should probably fix that now before we forget about it.

[05:01] Let's head back to the home of the perspective module under shared settings here, we have this top nav we configured. This is technically in a break now because there's no longer a view in the project at this path here. That's fine. We can actually change this. We actually want to go to our break point. Now we actually want to go to the break point top nav that we just created. So I'm going to change the view. I'm going to click the little down, I'm going to go to navigation and switch to break points. And then I'll click okay. All right, we can switch back to our top nav break point. And you know, actually before we dig too deep into this view here, I want to make sure that we have a smaller navigation view that we can use for the mobile experience. So I'll make sure we have both our top nav large, which we have already. And then I want to create a top nav small. Once we have both of those, then we'll place instances of them inside of this top nav break point of view. Let's just base it off of our larger top nav. So I'm going to right click on top nav large. I'm going to copy it and then I'm going to select the navigation folder. I'll right click and then I will paste into here.

[06:06] So that will create a top nav large one. I'm just going to rename this large one too small, So I'll right click rename, small and hit Enter. And then let's actually change the structure of the horizontal menu component on top nav small. So I'm going to open this up in the designer. I'll double-click on top nav small and we know we're looking at top nav small because it is the selected tab down below. Let's get rid of station two and three in this horizontal menu components. So I'm going to click on the horizontal menu components and we know it goes left to right. So I'll get rid of item number four. I will delete that. And then I'll right click on item number three and delete that and then for item number two, instead of stating station one we'll change this to station details. So we will head over to the label and we'll get out of the one at the end change that to details and hit Enter.

[07:03] Now I'm not going to change the target on the mobile experience here when you click on the station details button, we'll just take our users to station one and then we'll provide some additional components that will allow them to switch to the different stations. Okay, so we now have large and small, let's go back to our break point. So you can either select it here in the project browser or you can select it from the tabs down below. So I currently have my small child selected. So what I'll do is I'll come over to the component panel. Let's find an embedded view. We'll drag that into our break point container. So this is the embedded view that's assigned to the small child. So we will come up to path here, we'll click the dropdown, we'll go to navigation and we'll select top nav small and click okay. We'll then select the large child from up above, we'll click somewhere in our workspace which switches us over. We'll add another embedded view components. We will set the path here, we're back to navigation.

[08:03] We'll set this one to large and click okay. Now this doesn't really matter but it does bother me. I'm going to select the root container and I'm going to change the height of this container so that it looks similar to how the container is going to look in a session. And again, that doesn't matter too much because the dock settings for this view back under page configuration will ultimately determine the height. Now is a good time to save our project. Okay, now let's switch back to our browser. And because we saved, we're now using top nav break points at the top of our session here. If I resize my browser, so that it's smaller, we switch to the smaller top nav. If I make my browser wider we switch to the larger top nav. So now we're switching back and forth between two different views depending on available session width and that looks great. All right, so let's take a step back here. The key lesson here is that while building in perspective, if you need to switch to either a different set of components or to similar components with different configurations based on available session width, the break point container is an ideal container to use and we'll continue to use the break point container.

[09:09] In the next lesson here, we need to start thinking about the station details view. Right now it's not really designed well for the mobile experience. It's a little complex. It's got a lot of components that are going to be just crammed next to each other on a more narrow screen. So we'll develop a mobile version of station details and then we'll just use a break point container to switch between our current station details and then this new smaller one but we'll do that in the next video. So I'll see you then.